<template>
  <div class="rightBottomBar" v-if="show">
    <div
      class="funcBtn"
      v-for="item in btnList"
      :key="item.name"
      :title="item.tip"
      @click.stop="item.func()"
    >
      <i v-if="!item.text" :class="item.icon" style="font-size: 24px"></i>

      <i v-if="item.text" :class="item.icon" style="font-size: 20px"></i>
      <div v-if="item.text" class="text">{{ item.text }}</div>
    </div>
  </div>

  <div v-else></div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'
import { useRoute } from 'vue-router'
import { throttle } from '@/utils/func'

const props = defineProps({
  // 要进行滚动的目标元素
  target: { type: Element, default: null },
})

const route = useRoute()
// 判断是否需要显示
const show = ref<boolean>(false)
watch(
  () => route.path,
  () => {
    if (route.path.includes('/login')) show.value = false
    else show.value = true
  }
)

//
// 滚动到顶部
const toTop = () => {
  props.target.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

//
// 滚动到底部
const toBottom = () => {
  props.target.scrollTo({
    top: props.target.scrollHeight,
    behavior: 'smooth',
  })
}

const throttleToTop = throttle(toTop, 200)
const throttleToBottom = throttle(toBottom, 200)

interface BtnListType {
  name: string
  icon: string
  text: string
  func: Function
  tip?: string
}

const btnList: BtnListType[] = [
  {
    name: 'top',
    icon: 'icon-arrow-up-s-line',
    text: '顶部',
    func: throttleToTop,
    tip: '滚动到页面顶部',
  },
  {
    name: 'bottom',
    icon: 'icon-arrow-down-s-line',
    text: '底部',
    func: throttleToBottom,
    tip: '滚动到页面底部',
  },
]
</script>

<style scoped lang="less">
.rightBottomBar {
  z-index: 998;
  position: fixed;
  bottom: 10%;
  right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  border-radius: 4px;
  // background-color: rgb(245, 211, 166);
  user-select: none;

  > .funcBtn {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(214, 214, 214);
    background-color: rgba(255, 255, 255, 0.7);

    &:hover {
      cursor: pointer;
      background-color: #c8e0e4d3;
    }

    > .text {
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 2px;
      color: #606266;
    }
  }
}
</style>
